<template>
    <div class="remond">
        <router-link 
            to="/"
            class="items"
            v-for="(item,index) in recomendData" :key="index"
        >
            <div class="divs">
                <img :src="item.img" alt="">
                <span class="span1">{{item.content}}</span>
                <span class="span2">{{item.time}}</span>
                <span class="span3">燃脂{{item.hot}}/千卡</span>
                <span class="span4">{{item.L1}}</span>
                <span class="span5">{{item.buwei}}</span>
                <span class="span6">已有{{item.numbers}}人参与</span>
            </div> 
        </router-link>
        
        <div class="zhanwei"></div>
    </div>
</template>
<script>
export default {
    name:'RecomendItem',
    data(){
        return{
            recomendData:""
        }
    },
    mounted(){
        this.$axios.get(this.List_HOST)
        .then(res=>{
            console.log(res.data)
            this.recomendData=res.data

        })
        .catch(error=>{
            console.log(error)
        })
    }
}
</script>
<style lang="less" scoped>
.remond{
    width: 100%;
    .items{
        position: relative;
        .divs{   
            img{
                width: 100%;
                height: 170px;
                margin-bottom: 10px;
            }
            .span1{
                width: 100px;
                height: 30px;
    
                color:#Fddf05;
                position: absolute;
                top:30px;
                left: 20px;
                letter-spacing: 2px;
                font-size: 22px;
            }
            .span2{
                width: 60px;
                height: 30px;
             
                color:rgba(255,255,255,0.9);
                position: absolute;
                top:70px;
                left: 20px;
                letter-spacing: 2px;
                font-size: 16px;
            }  
            .span3{
                width: 160px;
                height: 30px;
              
                color:rgba(255,255,255,0.9);
                position: absolute;
                top:70px;
                left: 110px;
                letter-spacing: 2px;
                font-size: 16px;
            }  
            .span4{
                width: 60px;
                height: 30px;
             
                color:rgba(255,255,255,0.9);
                position: absolute;
                top:110px;
                left: 20px;
                letter-spacing: 2px;
                font-size: 16px;
            }  
            .span5{
                width: 40px;
                height: 30px;
          
                color:rgba(255,255,255,0.9);
                position: absolute;
                top:110px;
                left: 110px;
                letter-spacing: 2px;
                font-size: 16px;
            }  
            .span6{
                width: 140px;
                height: 30px;
            
                color:rgba(255,255,255,0.9);
                position: absolute;
                top:130px;
                left: 190px;
                letter-spacing: 2px;
                font-size: 16px;
            }  
        }       
    }
    
    .zhanwei{
        width: 100%;
        height: 40px;
    }  
}    
</style>